<template>
	<view class="content">
		<view class="topBg">
			<image class="bg1" src="/static/imgs/login_bg1.png"></image>
			<image class="bg2" src="/static/imgs/login_bg2.png"></image>
			<image class="bg3" src="/static/imgs/login_bg3.png"></image>
		</view>

		<view class="topM">
			<!-- <image class="logo" src="https://xd.xdzcy.top/iconnew/index/logo288.jpg"></image> -->
			<image class="logo" src="/static/imgs/logo.jpg"></image>
			<view class="title">响当当</view>
			<view class="describe">您好，欢迎使用响当当</view>
		</view>

		<view class="topfooter">

			<view class="btnV">
				<view class="btn" @click="getPhoneNumberView">登录/注册</view>

			</view>

		</view>

	</view>
</template>

<script>
	import {
		loginOne
	} from '@/config/api.js'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				code: ''
			};
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['saveUserInfo', 'saveToken']),
			getPhoneNumberView() {
				uni.login({
					success: async (loginres) => {
						if (loginres.errMsg == 'login:ok') {
							this.code = loginres.code
							console.log(this.code);
							const res = await loginOne({
								code: this.code
							})
							if (res.code == 1) {
								// 登录成功 存储 返回页面
								this.saveUserInfo(res.data.userinfo)
								this.saveToken(res.data.userinfo.token)
								uni.navigateBack()
							} else if (res.code == 100) {
								uni.reLaunch({
									url: '/pages/my/bindPhone?openid=' + res.data.openid
								})
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/* .content {} */

	.topBg {
		position: relative;
		height: 230rpx;
	}

	.bg1 {
		width: 122rpx;
		height: 282rpx;
		position: absolute;
		left: 0;
		bottom: -110rpx;
	}

	.bg2 {
		width: 104rpx;
		height: 104rpx;
		position: absolute;
		top: 0;
		right: 27%;
	}

	.bg3 {
		width: 128rpx;
		height: 144rpx;
		position: absolute;
		right: 0;
		bottom: -70rpx;
	}

	.topM {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.topM .logo {
		width: 112rpx;
		height: 112rpx;
	}

	.topM .title {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		margin: 20rpx 0;
	}

	.topM .describe {
		font-size: 30rpx;
		color: #666666;
	}

	.btnV {
		padding: 68rpx 80rpx 50rpx 80rpx;
		font-size: 0;
	}

	.btn {
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 50rpx;
		border: none;
		background-color: #ff4b32;
		color: #fff;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}

	button::after {
		border: none;
	}

	.btnOn {
		background: #06ad19;
	}

	.userAgreementV {
		width: 100%;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.textBefore {
		color: #333333;
		font-size: 24rpx;
		margin: 0 14rpx 0 0;
	}

	.textAfter {
		color: #e21d18;
		font-size: 24rpx;
	}

	.checkbox {
		width: 26rpx;
		height: 26rpx;
	}

	.btn_user {
		background: none;
		margin: 0;
		display: flex;
		align-items: center;
		padding: 20rpx 20rpx;
	}

	.topfooter {
		margin: 24% 0 0 0;
	}
</style>